<template>
  <a-modal
    :maskClosable="false"
    title="审核变更情况"
    centered
    :width="1200"
    :bodyStyle="{padding: '10px 24px'}"
    v-model="visible"
    class="reviewStatus-container"
    :confirmLoading="confirmLoading"
  >
    <template slot="footer">
      <div>
        <a-button :loading="loading3" @click="handleReview(2, 3)">拒绝</a-button>
        <a-button type="primary" :loading="loading1" @click="handleReview(1, 1)">
          仅通过
        </a-button>
        <a-button type="primary" :loading="loading2" @click="handleReview(1, 2,{sync: true})">
          通过并同步
        </a-button>
      </div>
    </template>
    <a-tabs>
      <a-tab-pane key="1" tab="基本信息">
        <a-form class="addTenant">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="12" :md="24" v-if="info.memberName !== undefined">
              <a-form-item label="会员名称：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.memberName }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.contactPerson !== undefined">
              <a-form-item label="联系人：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.contactPerson }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.contactDtl !== undefined">
              <a-form-item label="联系方式：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.contactDtl }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.officeTel !== undefined">
              <a-form-item label="联系人办公电话：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.officeTel }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.email !== undefined">
              <a-form-item label="单位邮箱：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.email }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.originalServer !== undefined">
              <a-form-item label="原服务专员：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.originalServer }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.currentService !== undefined">
              <a-form-item label="现服务专员：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.currentService }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.plaqueStatusStr !== undefined">
              <a-form-item label="牌匾状态：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.plaqueStatusStr }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.assigningTypeStr !== undefined">
              <a-form-item label="分配类型：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.assigningTypeStr }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.typeNameStr !== undefined">
              <a-form-item label="组织类别：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.typeNameStr }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.levelName !== undefined">
              <a-form-item label="会员级别：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.levelName }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.industryName !== undefined">
              <a-form-item label="行业分类：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.industryName }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.rating !== undefined">
              <a-form-item label="评级：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.rating }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.website !== undefined">
              <a-form-item label="网址：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.website }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.joinTime !== undefined">
              <a-form-item label="加入时间：" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <span>{{ info.joinTime }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.province !== undefined || info.city !== undefined || info.area !== undefined">
              <a-form-item
                label="所在地区"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol">
                <span>{{ info.province }}</span>
                <span>{{ info.city }}</span>
                <span>{{ info.area }}</span>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="12" :md="24" v-if="info.status !== undefined">
              <a-form-item label="会员状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <span>{{ info.status ? '开启' : '关闭' }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="详细地址"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                v-if="info.address !== undefined"
              >
                <span>{{ info.address }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="单位简介"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                v-if="info.remarks !== undefined"
              >
                <span>{{ info.remarks }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :xxl="6" :xl="12" class="_mb-20" v-if="info.logo !== undefined">
              <a-form-item label="LOGO" >
                <img class="img" :src="info.logo" alt="">
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" class="_mb-20" v-if="info.orgStructureImg !== undefined">
              <a-form-item label="组织架构图" >
                <img class="img" :src="info.orgStructureImg" alt="">
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" class="_mb-20" v-if="info.wechatMp !== undefined">
              <a-form-item label="公众号">
                <img class="img" :src="info.wechatMp" alt="">
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="12" class="_mb-20" v-if="info.registerUrl !== undefined">
              <a-form-item label="登记证书">
                <img class="img" :src="info.registerUrl" alt="">
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-empty v-if="!isData" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="主要负责人">
        <s-table
          class="table"
          size="default"
          ref="table"
          rowKey="userId"
          :rowSelection="null"
          :columns="columns1"
          :data="loadData1"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ (pageNum1-1) * pageSize1 + index + 1 }}
          </span>
          <span slot="avatar" slot-scope="text,record">
            <a-avatar v-if="record.avatar !== ''" :src="record.avatar" />
            <a-avatar v-else icon="user" />
          </span>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="3" tab="主要成员">
        <s-table
          class="table"
          size="default"
          ref="table"
          rowKey="userId"
          :rowSelection="null"
          :columns="columns2"
          :data="loadData2"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ (pageNum2-1) * pageSize2 + index + 1 }}
          </span>
          <span slot="avatar" slot-scope="text,record">
            <a-avatar v-if="record.avatar !== ''" :src="record.avatar" />
            <a-avatar v-else icon="user" />
          </span>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="4" tab="主要荣誉">
        <s-table
          class="table"
          size="default"
          ref="table"
          rowKey="userId"
          :rowSelection="null"
          :columns="columns3"
          :data="loadData3"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ (pageNum3-1) * pageSize3 + index + 1 }}
          </span>
          <span slot="avatar" slot-scope="text,record">
            <a-avatar v-if="record.avatar !== ''" :src="record.avatar" />
            <a-avatar v-else icon="user" />
          </span>
        </s-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
import { headquartersInfo4Review, leadingMemberPageList4Review, responsiblePersonPageList4Review, honorPageList4Review, headquartersReview } from '@/api/system/system'
import { STable } from '@/components'
export default {
  components: {
    STable
  },
  data () {
    return {
      visible: false,
      loading1: false,
      loading2: false,
      loading3: false,
      isData: false,
      info: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      pageNum1: 1,
      pageSize1: 10,
      // 加载数据方法 必须为 Promise 对象
      loadData1: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
          cocId: this.id
        }
        return leadingMemberPageList4Review(Object.assign(params, this.queryParam)).then(res => {
          this.pageNum1 = parameter.pageNum
          this.pageSize1 = parameter.pageSize
          return res
        })
      },
      // 表头
      columns1: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '头像',
          dataIndex: 'avatar',
          width: '100px',
          scopedSlots: { customRender: 'avatar' }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: '200px',
          ellipsis: true
        },
        {
          title: '职务',
          dataIndex: 'titleStr',
          width: '200px'
        },
        {
          title: '个人简介',
          dataIndex: 'remarks',
          width: '200px',
          ellipsis: true
        }
      ],
      pageNum2: 1,
      pageSize2: 10,
      // 加载数据方法 必须为 Promise 对象
      loadData2: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
          cocId: this.id
        }
        return responsiblePersonPageList4Review(Object.assign(params, this.queryParam)).then(res => {
          this.pageNum1 = parameter.pageNum
          this.pageSize1 = parameter.pageSize
          return res
        })
      },
      // 表头
      columns2: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '头像',
          dataIndex: 'avatar',
          width: '100px',
          scopedSlots: { customRender: 'avatar' }
        },
        {
          title: '单位名/姓名',
          dataIndex: 'name',
          width: '200px',
          ellipsis: true
        },
        {
          title: '职务',
          dataIndex: 'titleStr',
          width: '200px'
        },
        {
          title: '个人简介',
          dataIndex: 'remarks',
          width: '200px',
          ellipsis: true
        }
      ],
      pageNum3: 1,
      pageSize3: 10,
      // 加载数据方法 必须为 Promise 对象
      loadData3: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
          cocId: this.id
        }
        return honorPageList4Review(Object.assign(params, this.queryParam)).then(res => {
          this.pageNum1 = parameter.pageNum
          this.pageSize1 = parameter.pageSize
          return res
        })
      },
      // 表头
      columns3: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '荣誉描述',
          dataIndex: 'remarks',
          ellipsis: true
        }
      ]
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    show (obj) {
      this.id = obj.id
      this.visible = true
      this.handleInfo()
    },

    handleInfo () {
      var params = {
        id: this.id
      }
      return headquartersInfo4Review(params).then(res => {
        if (res.code === 0) {
          var arr = []
          for (var i in res.data) {
            arr.push(i)
          }
          this.isData = arr.length > 1
          this.info = res.data
        }
      })
    },

    // 审核
    handleReview (status, type, params) {
      var msg = status === 1 ? '审核通过' : '审核拒绝'
      var title = type === 2 ? '确认同步' : '拒绝通过'
      var content = type === 2 ? '是否确认同步信息，同步后将覆盖已编辑信息，已当前信息将展示在大屏、网站、小程序上。' : '是否确认拒绝通过，拒绝后会员需要重新编辑信息提交审核。'
      var _this = this
      if (type === 2 || type === 3) {
        this.$confirm({
          title: title,
          content: content,
          onOk () {
            if (type === 2) {
              _this.loading2 = true
            } else {
              _this.loading3 = true
            }
            var data = {
              id: _this.id,
              status: status
            }
            return headquartersReview(data, params).then(res => {
              if (type === 2) {
                _this.loading2 = false
              } else {
                _this.loading3 = false
              }
              if (res.code === 0) {
                _this.$emit('ok')
                _this.$message.success(msg)
                _this.visible = false
              } else {
                _this.$message.error(res.msg)
              }
            })
          },
          onCancel () {}
        })
      } else {
        this.loading = true
        var data = {
          id: this.id,
          status: status
        }
        return headquartersReview(data, params).then(res => {
          if (res.code === 0) {
            this.loading = false
            this.$message.success(msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .img{
    width: 100px;
    height: 100px;
    object-fit: contain;
  }
  /deep/ .ant-form-item-control .suffixStyle {
    position: absolute;
    right: 20px;
    top: -8px;
    user-select:none;
  }
  .title{
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 5px;
  }
  .table{
    padding-top: 10px;
  }
  .addTenant {
    .card {
      margin-bottom: 20px;
    }
    /deep/ .ant-form-item {
      display: flex;
      margin-bottom: 0;
    }
    /deep/ .ant-form-item-label{
      width: 120px;
      flex-shrink: 1;
    }
    /deep/ .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
</style>
